<template>
    <button @click="num++">获取P标签 </button>
    <h1>{{ num }}</h1>
    <ul>
      <li v-for="(item,index) in 4" :key="index" :ref="getDom">
        {{ item }} === {{ index }}
      </li>
    </ul>
</template>
<!-- 在script标签上 写入setup 就是 setup入口函数的语法糖  -->
<script setup>
import { ref, computed, onMounted, watch 
  ,reactive ,onUpdated , onBeforeUpdate , nextTick } from 'vue'
// 1. 当我们更新状态(数据)页面会重绘,没发生一次重绘 ref对应的回调都会 执行一次
// 在 更新之前  把 数组清空掉;
  let num = ref(0)
// ------------
  let  arr = []
  const getDom = (el)=>{
    arr.push(el)
  }
  onMounted(()=>{
    console.log(arr , 'onMounted');
  })
  onBeforeUpdate(()=>{
   
    console.log(arr);
    arr = []
  })

</script>
<!-- 再写一个script标签 使用Vue2的方法 写入name属性 -->
<script>
export default {
  name: 'App',
}
</script>
